<template>
    <!-- 主布局容器 -->
    <a-layout class="Layout bg">
        <!-- 自定义头部组件，用于显示报修平台的头部导航 -->
        <MyHeader logo="报修平台" :headers="Headers" />
        <!-- 嵌套布局 -->
        <a-layout>
            <!-- <MySider class="mysider"></MySider> -->
            <!-- 内容区域 -->
            <a-layout>
                <!-- 内容主体，使用路由视图展示动态内容 -->
                <a-layout-content class=".bg-alpha bg">
                    <RouterView></RouterView>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script lang="ts" setup>
// 引入自定义的头部组件
import MyHeader from '@/components/Headers/MyHeader.vue';
// 引入Vue Router的视图组件
import { RouterView } from 'vue-router';

// 定义头部导航菜单项x
const Headers = [
    { to: '/repair/index', text: '最新申报' },
    { to: '/repair/repair_detail', text: '数据汇总' },
    { to: '/repair/repair_Person', text: '个人效率' },
    { to: '/repair/repair_Satisfaction', text: '满意度' },
    { to: '/repair_Accept', text: '受理效率' }
];
</script>
<style lang="scss" scoped>
@import '/src/assets/style/bg.scss';

/* 主布局样式 */
.Layout {
    height: 100vh;
    width: 100%;

    /* 侧边栏样式，当前隐藏 */
    .mysider {
        display: none;
    }
}

/* Logo样式 */
#components-layout-demo-top-side-2 .logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 255, 255, 0.3);
}

/* 右对齐Logo样式 */
.ant-row-rtl #components-layout-demo-top-side-2 .logo {
    float: right;
    margin: 16px 0 16px 24px;
}

/* 内容背景色 */
.site-layout-background {
    background: #fff;
}
</style>
